<template>
  <div class="box">
    <header></header>
    <div>
      <span class="iconfont iconicon-test" @click="$router.push('/')"></span>
    </div>
    <div class="box">
      <div class="icon">
        <span class="iconfont iconnew"></span>
      </div>
      <div class="form">
        <form action>
          <verifyinput
            inptype="text"
            inp="用户名 / 手机号码"
            :verify="/\d{2}/"
            msg="请输入正确的用户名或手机号"
            @verifyvalue="ver"
          />
          <br />

          <verifyinput
            inptype="password"
            inp="密码"
            :verify="/^\d{3}$/"
            msg="请输入正确的密码"
            @verifyvalue="verpass"
          />
          <br />

          <verifybtn verifyval="登录" @verifyclick="btnclick" />

          <router-link to="/register">没有账号,去注册</router-link>
        </form>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.box {
  font-weight: 400;
  background: white;
  width: 100%;
  height: 100vh;
  header {
    height: 20/360 * 100vw;
    background-color: #757575;
    margin-bottom: 20/360 * 100vw;
  }
  .iconicon-test {
    font-size: 24/360 * 100vw;
    margin-left: 20/360 * 100vw;
    margin-top: 20/360 * 100vw;
  }
  .box {
    margin: 0 auto;
    .icon {
      color: red;
      text-align: center;
      span {
        font-size: 100/360 * 100vw;
      }
    }
    .form {
      text-align: center;
      button {
        width: 75%;
        height: 40/360 * 100vw;
        font-size: 25/360 * 100vw;
        margin-top: 40/360 * 100vw;
        border: none;
        background: #eb2202;
        border-radius: 20/360 * 100vw;
        margin-bottom: 20px;
      }
      a {
        font-size: 15/360 * 100vw;
        color: #40b181;
      }
    }
  }
}
</style>

<script>
import verifyinput from "../components/module/verifyinput"; //输入框组件
import verifybtn from "../components/module/verifybtn"; //按钮组件

export default {
  //注册子组件
  components: {
    verifyinput,
    verifybtn,
  },
  data() {
    return {
      username: "",
      pass: "",
    };
  },
  methods: {
    btnclick() {
      if (!this.pass || !this.username) {
        this.$toast("请输入完整信息");
        return;
      }
      this.$axios({
        url: "/login",
        method: "post",
        data: {
          username: this.username,
          password: this.pass,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.message == "登录成功") {
          this.$toast.success(res.data.message);
          localStorage.setItem("token", res.data.data.token);
          localStorage.setItem("userid", res.data.data.user.id);

          this.$router.replace("/personal");

        } else {
          this.$toast.fail(res.data.message);
        }
      });
    },
    ver(val) {
      //用户名
      this.username = val;
    },
    verpass(val) {
      //密码
      this.pass = val;
    },
  },
};
</script>